<template>
        <div class="blog-list" id="main" style="overflow:auto">
                    <el-card  class="blog-body" v-for="(blog,i) in blogs.blog" style="border-radius: 2px;" shadow="never">
                        <div class="card-title" >
                            <router-link :to="{name:'blogDetail',params:{aid:blog.aid}}"   class="router">
                            {{blog.title}} 
                            </router-link>
                        </div>
                        <div class="card-meta-top">
                            <span class="card-meta-cate">
                                <i class="el-icon-position"></i>
                                 {{blog.name}}
                            </span>
                            <span class="card-meta-date">
                                <i class="el-icon-time"></i>
                                {{blog.publish}}
                            </span>
                        </div>
                        <div class="card-img">
                            <el-image
                                    style="width: 100%; height: 100%"
                                    :src="blog.imgUrl"
                                    :fit="fit"></el-image>
                        </div>

                       {{blog.text}}
                        <el-divider class="card-line"></el-divider>
                        <ul class="card-meta-bottom">
                            <li class="card-meta-label ">
                                <router-link :to="{name:'blogDetail',params:{aid:blog.aid}}"   class="router">
                                    <i class="el-icon-more"></i>
                                    <i class="el-icon-more"></i>
                                </router-link>
                            </li>
                            <li class="card-meta-label card-meta-right">
                                <i class="el-icon-chat-dot-round"></i> 0
                            </li>
                            <li class="card-meta-label card-meta-right">
                                <i class="el-icon-view"></i> 0
                            </li>
                        </ul>
                    </el-card>
            <el-pagination class="blog-page"
                    background
                    layout="prev, pager, next"
                           :current-page="current"
                           :page-size="PageSize"
                           :total="total"
            @current-change=getArticle
                           hide-on-single-page="true">
            </el-pagination>
        </div>

</template>

<script>
    import navMenu from '@/components/navMenu.vue'
    import Footer from '@/components/Footer.vue'

    import {getArticleList} from '@/api/index'
    import {ref,reactive} from 'vue';
    export default {
        name: "博客首页",
        setup(){
            const current =ref(0);
            const total =ref(0);
            const PageSize=ref(0);
            const blogs= reactive({blog:[]});
            const url =ref("http://img.rui61.cn/images/2020/07/11/1.md.jpg");
            getArticle(1);
            function getArticle(current){
                getArticleList(current).then(res=>{
                     blogs.blog = res.data.data.records;
                    total.value = res.data.data.total;
                    PageSize.value =res.data.data.size;
                   //url.value=res.data.data.imgUrl;
                   // current.value=res.data.data.current; //能用但是报错
                     console.log(blogs.blog);
                     console.log(blogs.blog[0].aid);
                });
            }
            // const loading =ref(false);
            // const counts =ref(10);
            // load(counts);
            // function load() {
            //     loading.value = true
            //     setTimeout(() => {
            //         counts.value += 2
            //         loading.value = false
            //     }, 2000)
            // }
            return {getArticle,total,PageSize,blogs,current,
                url
            }

        }
    }
</script>

<style scoped>
.blog-page{
    margin: 0 auto;
    text-align: center;
}
#main{
    margin-bottom: 60px
}
@media (min-width: 1800px) {
    .blog-list{
        margin-left: 25.66667%;
        width: 52.66667%;
    }
}
.blog-body{
    margin: 25px auto;
    padding: 15px;
    background: #fff;
    border-radius: 10px;
    margin-left:100px;
    background-color: #f2f2f2;

}
.blog-body /deep/.el-card{
    height: 500px;
    width: 80%;
}


.card-title{
    font-size: 20px;
    line-height: 1.4;


    /*font-family: Roboto,"Open Sans","Microsoft YaHei","Helvetica Neue",Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;*/
    /*-webkit-transition: all .24s ease;*/
    /*transition: all .24s ease;*/
    /*color: #333;*/
    /*text-decoration: none;*/
}
.card-title .router{
    transition: all .24s ease;
    color: #333;
    text-decoration: none;
}
.card-meta-top{
    margin: 10px 0;
    font-size: 13px;
    color: #8a8a8a;
}
.card-line {
    width: 100%;
    height: 2px;
    margin: 10px 0;
    overflow: hidden;
    font-size: 0;
    border-bottom: 1px solid #e1e1e1;
}
.card-meta-bottom{
    padding: 0;
    margin: 0;
    list-style: none;
}
.card-meta-label{
    padding: 0;
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    color: #8a8a8a;
    line-height: 1.3;
}
.card-meta-right{
    float: right;
}
.card-img{
    display: block;
    height: 320px;
    width: 100%;
    margin: 10px auto;
    box-sizing: border-box;
    overflow: hidden;
}
/*element-ui的时间戳的线  因为修改之后无效 所有加上/deep/ */
/*.blogweb-list /deep/ .el-timeline-item__tail{*/
/*    display:none;*/
/*    }*/
/*.blogweb-list /deep/.el-timeline-item__node--normal{*/
/*    display:none;*/
/*}*/

</style>